<template>
  <uni-row class="margin-bottom">
    <uni-col v-for="col in openColumns" :key="col"
      :span="['pay_amount','order_total_amount','pay_amount_str','order_total_amount_str','pay_amount_strs','remark'].includes(col)?24:12">
      <view class="form-item" v-if="showEmpty||getColumnvalue(col,'value')">
        <text :column="col" :class="{'text-red':'pay_amount'===col||'pay_amount_str'===col}"
          class="text-bold form-item-label">{{getColumnvalue(col,'label')}}:</text>
        <text class="form-item-coutent" v-if=" col == 'order_state'">
          <uni-tag :inverted="true" :text="getColumnvalue(col,'value')"
            :type="getColumnvalue(col,'value') == '已结账'?'primary' : 'error'" />
        </text>
        <text class="form-item-coutent" :class="{'text-red':'pay_amount'===col||'pay_amount_str'===col}"
          v-else>{{getColumnvalue(col,'value')||'--'}}</text>
      </view>
    </uni-col>
  </uni-row>
</template>

<script>
  export default {
    props: {
      section: {
        type: String
      },
      columns: {
        type: Array
      },
      fields: {
        type: Array
      },
      detailData: {
        type: Object
      },
      showEmpty: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      openFields() {
        return this.fields.filter(item => this.openColumns.includes(item.columns))
      },
      openColumns() {
        if (this.section == '合计信息') {
          return this.columns.filter((col) => {
            if (col === 'discount_reduction_amount' || col == 'discount_amount') {
              return false
            } else {
              return true;
            }
          })
        } else if (this.section == '订单信息' && this.detailData.discount_type != "整单手动打折/改价" &&
          this.detailData.discount_type != "免单") {
          return this.columns.filter((item) => {
            if (item == "discount_reason_name") {
              return false
            } else {
              return true;
            }
          })
        } else {
          return this.columns
        }
      }
    },
    methods: {
      getColumnvalue(col, type) {
        let field = null
        if (Array.isArray(this.fields)) {
          field = this.fields.find(item => item.column === col)
        }
        let str = null;
        if (!field) {
          return
        }
        if (col && col.indexOf('child|') == -1 && col.indexOf('#child') == -1 && field[type]) {
          str = field[type]
        }
        if (field.col_type == 'Dict' && Array.isArray(field.option_list_v2)&&type==='value') {
          let option = field.option_list_v2.find(e => e.value === str)
          if (option?.label) {
            str = option.label
          }
        }
        if (col.indexOf('_disp') !== -1) {
          str = this.detailData[col]
        }
        if (str === 0 || field[type] === 0) {
          str = '0'
        }
        if (type === 'value' && str && field.col_type === 'Money') {
          str = Number(str)
          if (str < 0) {
            str = `-￥${Number(-str)}`
          } else if (str === 0) {
            if (col === 'pay_amount') {
              str = '￥0'
            }
          } else {
            str = `￥${Number(str)}`
          }
        }
        return str
      },
    },
  }
</script>

<style scoped lang="scss">
  .form-item {
    padding: 2rem 1rem;
    display: flex;
    align-items: flex-start;

    &-coutent {
      word-break: break-all;
    }
  }
</style>
